<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对象DOM</title>
    <style>
        .grade-table {
            width: 100%;
            border-collapse: collapse;
        }
        /* 修改标题颜色 */
        .grade-table th {
            background-color: #4CAF50; /* 绿色背景 */
            color: white; /* 白色文字 */
            padding: 12px;
            text-align: left;
        }
        .grade-table td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <h2 style="color: #2c3e50;">成绩表</h2>
    
    <table class="grade-table">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>003</td>
            <td>王五</td>
            <td>83</td>
            <td>很努力,不错</td>
        </tr>
        <!-- 已删除最后一行（赵六） -->
    </table>
</body>
<script>
    //封装为5个对象
    //Document  //整个页面
    //Element   //元素标签
    //Attribute //标签属性
    //Text      //文本
    //Comment   //注释

    //Element 获取方式
    //根据id获取
    // var h2 = document.getElementById('h2');
    // //根据标签名称获取
    // var h2 = document.getElementsByTagName('h2');
    // //根据name属性获取
    // var h2 = document.getElementsByName('h2');
    // //根据class属性获取
    // var h2 = document.getElementsByClassName('table');
    // console.log(h2)
    var flag = confirm("if you want to open new website")
    if(flag){
        location.href = "https://www.w3school.com.cn/"
    }

    
</script>
</html>